import React, { useState,useEffect,useContext } from 'react';
import { Button, Modal,message,Form,Input,Space } from 'antd';
import { getGoodsById,setUserInfoByOrder } from '../../../../api/OrderApi'
import myContext from '../../../../utils/myContext'

import SelectGoods from './SelectGoods'
interface DataType {
	key: React.Key;
	number: number;
	order_number: number;
	submit_time: string;
	user_account: string;
	// order_money: number;
	pay_method: string;
	order_source: number;
	order_state: number; //订单状态
	conName: string,//收货人姓名
	conPhone: string,//收货人手机号
	postcode: string,//邮政编码
	conAddress: string,//收货地址
	goods_name: string,//商品名称
	goods_pic: string,//商品图片
	goods_price: number,//商品单价
	goods_attribute: string,//商品属性
	goods_number: number,//商品数量
	remark: string,//买家备注
	freight: number,//运费
	discount: number,//优惠金额

    goodsId:number | undefined;//商品id
    orderId:number| undefined;//订单id
    conId:number | undefined;//规格id
}
interface PropsType{
    isModalOpen:boolean;
    close():void;
    params:DataType|null
}

function EditOrderModal(props:PropsType){
  const [isSelectOpen, setIsSelectOpen] = useState(false);
  const [form] = Form.useForm();
  const [goodsInfo,setGoodsInfo]=useState([])
  const context=useContext<any>(myContext)
//   console.log('props.params',props.params);


  // const handleOk = () => {
  //   // setIsModalOpen(false);
  //      props.close()
  //      message.success('修改订单成功')
  // };

//   设置表单初始值
useEffect(()=>{
    form.setFieldsValue({
        name:props.params?.conName,
        phone:props.params?.conPhone,
        // code:props.params?.postcode,
        address:props.params?.conAddress,
    })	
})


  const cancleHandle = () => {
    // setIsModalOpen(false);
    props.close()
    message.info('取消修改订单')
};

//   确认修改
const onFinish = (values: any) => {
    console.log('Received values of f确认修改m: ', values);

    // 发请求
    setUserInfoByOrder({
        orderId:props.params?.orderId,
        conId:props.params?.conId,
        conAddress:values.address,
        conName:values.name,
        conPhone:values.phone
    }).then(res=>{
        console.log('修改联系人res',res);
        context.getOrderDetail()
    }).catch(err=>{
        console.log('err1133',err);  
    })
    // 关闭添加弹框
    props.close() 
    // 提示
    message.success('修改订单成功')
    
};

// 关闭选择商品的弹框
const close=()=>{
  setIsSelectOpen(false)
}

// 选择商品 弹出弹框选择商品
const selectGoods=()=>{
    getGoodsById({
        goodsId:props.params?.goodsId,
        orderId:props.params?.orderId
    }).then(res=>{
        // console.log('商品res',res);
        setGoodsInfo(res.data)
    }).catch(err=>{
        console.log('err000',err);
        
    })
	setIsSelectOpen(true)
}

  return (
    <>
      <Modal title="修改订单信息" open={props.isModalOpen} footer={null} width={600} forceRender>
      <Form        form={form}
                    name="normal_login"
                    className="update-form"
                    onFinish={onFinish}
                >
                    <Form.Item
                       label='姓名'
                        name="name"
                    >
                        <Input placeholder="姓名" />
                    </Form.Item>
                    <Form.Item
                     label='手机号'
                        name="phone"
                    >
                        <Input
                            placeholder="手机号"
                        />
                    </Form.Item>
                    {/* <Form.Item
                     label='邮政编码'
                        name="code"
                    >
                        <Input
                            placeholder="邮政编码"
                        />
                    </Form.Item> */}
                    <Form.Item
                     label='收货地址'
                        name="address"
                    >
                        <Input
                            placeholder="收货地址"
                        />
                    </Form.Item>
                    <Form.Item
                     label='选择商品'
                        name="goods"
                    >
                      <Button type='link' onClick={()=>selectGoods()}>选择商品</Button>
                    </Form.Item>
                    
                    <Form.Item shouldUpdate>
                        {() => (
                            <Space wrap>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                >
                                    确定
                                </Button>
                                <Button htmlType="button" className='orderlist_reset' onClick={cancleHandle}>
                                    取消
                                </Button>
                            </Space>

                        )}
                    </Form.Item>
                </Form>
      </Modal>


      {/* 商品选择弹框 */}
      <SelectGoods isSelectOpen={isSelectOpen} close={close} goodsInfo={goodsInfo} goodsId={props.params?.goodsId} orderId={props.params?.orderId}></SelectGoods>
    </>
  );
};

export default EditOrderModal;